<template>
  <div class="cmp cmp-epub">
    <div id="epubReader"></div>
    <select class="form-control catalog-selector" v-model="catalog" @change="catalogChange" placeholder="目录">
      <option v-for="(v, i) in catalogs" :key="i" :value="v.value" >{{ v.label }}</option>
    </select>
    <div class="page-btn page-btn-prev" @click="changePageNum(-1)" v-if="!pageNumIsStart">
      <i class="xvu-iconfont xvu-arrow-left"></i>
    </div>
    <div class="page-btn page-btn-next" @click="changePageNum(1)" v-if="!pageNumIsEnd">
      <i class="xvu-iconfont xvu-arrow-right"></i>
    </div>
  </div>
</template>

<script>
import ePub from 'epubjs'

export default {
  name: "cmp-epub",
  props: {
    url: {type: [String, ArrayBuffer], default: ''},
    count: {type: Number, default: 0}
  },
  data() {
    return {
      book: null,
      rendition: null,
      catalog: '',
      catalogs: [],
      pageNumIsStart: false,
      pageNumIsEnd: false,
    };
  },
  watch: {
    count () {
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.book && this.book.destroy()
  },
  methods: {
    init () {
      if (!this.url) return
      this.book && this.book.destroy()
      let epubReader = document.getElementById('epubReader')
      epubReader && (epubReader.innerHTML = '')
      this.$nextTick(() => {
        this.book = ePub(this.url)
        this.rendition = this.book.renderTo('epubReader', {
          flow:'paginated',
          width:'100%',
          height:'100%'
        })
        this.rendition.display()
        this.book.ready.then(() => {
          let toc = this.book.navigation.toc
          for (let item of toc) {
            this.catalogs.push({label: item.label, value: item.href}) // 获得目录数组
          }
        })
        this.rendition.on('rendered', (section) => {
          console.log('rendered:', section)
          this.catalog = section.href || ''
        })
        this.rendition.on('relocated', (location) => {
          console.log('relocated:', location)
          this.pageNumIsStart = location.atStart
          this.pageNumIsEnd = location.atEnd
          this.catalog = location.start.href || ''
        })
      })
    },
    catalogChange () {
      if (!this.rendition) return
      this.rendition.display(this.catalog)
    },
    changePageNum (num) {
      if (!this.rendition) return
      if (num < 0) {
        this.rendition.prev()
      } else if (num > 0) {
        this.rendition.next()
      }
    }
  },
};
</script>

<style lang="less">
.cmp-epub {
  height: 100%;
  padding: 35px 50px 0;
  position: relative;
  #epubReader {
    width: calc(100vw - 160px);
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  .catalog-selector {
    position: absolute;
    top: -15px;
    left: 30%;
    width: 40%;
  }
  .page-btn {
    width: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #999;
    cursor: pointer;
    .xvu-iconfont {
      font-size: 36px;
    }
    &:hover {
      color: #787878;
    }
  }
  .page-btn-prev {
    left: 0;
  }
  .page-btn-next {
    right: 0;
  }
}
</style>
